<template>
  <!-- <el-radio-group v-model="getCollapse" style="margin-bottom: 20px;">
    <el-radio-button :label="false">展开</el-radio-button>
    <el-radio-button :label="true">收起</el-radio-button>
  </el-radio-group> -->
  <div class="wrap" :class="{unfold:!getCollapse}">
  <el-row class="left-nav">
    <el-col :span="24">
      <el-menu
        :collapse="getCollapse"
        :default-active="currentRoute"
        class="el-menu-vertical-demo unfold"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
        @select="selectRoute"
      >
    <div class="person-info">
      <div class="person-thumb">
        <img :src="getUserInfo.avatar"/>
      </div>
      <p class="person-nick" style="color:#f1f1f1;">{{getUserInfo.nickname}}</p>
    </div>
        <el-menu-item index="/dashboard">
          <i class="el-icon-location"></i>
          <span slot="title">首页</span>
        </el-menu-item>

        <el-submenu :index="'/'+v.path" v-for="(v,k) in getHomeNavData" :key="k">
          <template slot="title">
            <i :class="v.icon"></i>
            <span>{{v.title}}</span>
          </template>
          <el-menu-item-group v-for="(v1,k1) in v.children" :key="k1">
            <el-menu-item :index="'/dashboard/'+v.path+'/'+v1.path">{{v1.title}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>


      </el-menu>
    </el-col>
  </el-row>
  </div>
</template>

<script>
// 导入Vuex中的mapGetters 辅助函数 ，帮助快速的将store中的getters映射到局部组件的计算属性中
import { mapGetters , mapMutations , mapActions } from 'vuex'
export default {
  components: {},
  data () {
    return {
      currentRoute: null
    }
  },
  methods: {
    selectRoute (index) { // 每次点击之后激活的菜单调换
      console.log(index)
      this.currentRoute = index
    }
  },
  computed: {
    // getCollapse为折叠类，getUserInfo为获取用户信息
    ...mapGetters('user',[
      'getCollapse',
      'getUserInfo'
    ]),
    
    // getHomeNavData为获取路由数据信息
    ...mapGetters('system',[
      'getHomeNavData'
    ])
  },
  created() {
    // console.log(this.$router.currentRoute.fullPath)
    this.currentRoute = this.$router.currentRoute.fullPath
  }
}
</script>

<style scoped lang='less'>
.wrap{
  float: left;
  height:100vh;
  background:rgb(84, 92, 100);
  overflow:auto;
}
.person-info{
  width:100%;
  height:100px;
  background:rgb(84, 92, 100);
  text-align:center;
  .person-thumb{
    height:60px;
    width:60px;
    border-radius:50%;
    border:1px solid #ccc;
    margin:10px auto;
    overflow:hidden;
    img{
      width:100%;
      height:100%;
    }
  }
}
.wrap.unfold{
  width:200px;
  overflow:hidden;
  & .left-nav{
    width:230px;
    height:100vh;
    overflow:auto;
  }
}
.left-nav {
  float:left;
  overflow:hidden;
   .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  ul{
    border-right:1px solid rgb(84, 92, 100);
  }
}
a{
  color:rgb(255, 255, 255);
  text-decoration: none;
}
</style>
